<template>
  <div class="gl_heightFull gl_contentBox">
    <div class="header">
      <el-button :disabled="!Boolean(ExamEntryApprovalDto.approveStatusCode === 'Draft' || ExamEntryApprovalDto.approveStatusCode === 'NotApproved')" type="success" size="mini" @click="addstudent">添加考生</el-button>
      <div class="nav">
        <div>
          <span class="nav_title">提交状态</span>
          <span class="nav_text">{{ ExamEntryApprovalDto.approveStatusCode === 'Draft'?'未提交':'已提交' }}</span>
        </div>
        <div>
          <span class="nav_title">审核状态</span>
          <span v-if="ExamEntryApprovalDto.approveStatusCode === 'Approved' || ExamEntryApprovalDto.approveStatusCode === 'NotApproved'" class="nav_text"> {{ '已审核' }} </span>
          <span v-else class="nav_text">{{ '未审核' }}</span>
        </div>
        <div>
          <span class="nav_title">审核结果</span>
          <span v-if="ExamEntryApprovalDto.approveStatusCode === 'Approved'" class="nav_text">{{ '审核通过' }}</span>
          <span v-if="ExamEntryApprovalDto.approveStatusCode === 'NotApproved'" class="nav_text">{{ '审核驳回' }}</span>
        </div>
        <div v-if="ExamEntryApprovalDto.approveStatusCode === 'NotApproved'">
          <span class="nav_title">驳回原因</span>
          <el-popover placement="top" style="margin-top:6px" trigger="hover" :content="ExamEntryApprovalDto.approveRemark" width="380">
            <span slot="reference" class="nav_text table_name">{{ ExamEntryApprovalDto.approveRemark }}</span>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="4" :lg="4">
          <p>会员费类型</p>
          <el-select v-model="IsEnabled" size="mini" @change="gettablelist()">
            <el-option label="全部" value="" />
            <el-option label="新增" value="New" />
            <el-option label="续费" value="Renew" />
          </el-select>
        </el-col>
        <el-col :md="4" :lg="4">
          <p>考生姓名</p>
          <el-input v-model="Api_GET_ClubDuanExamStudentQO.StudentName" placeholder="请输入考生名称" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :md="4" :lg="4">
          <p>证件号码</p>
          <el-input v-model="Api_GET_ClubDuanExamStudentQO.IdCardNumber" placeholder="请输入证件号码" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :md="4" :lg="4">
          <p>申报级别</p>
          <el-input v-model="Api_GET_ClubDuanExamStudentQO.DuanName" placeholder="请输入申报级别" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :md="4" :lg="4">
          <p>教练</p>
          <el-input v-model="Api_GET_ClubDuanExamStudentQO.CoachName" placeholder="请输入教练名称" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :md="4" :lg="4">
          <el-button type="primary" style="margin-top:25px" size="mini" @click="gettablelist()">筛选</el-button>
          <el-button type="warning" size="mini" @click="reset()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top:15px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column label="序号" type="index" align="center" width="55" />
        <el-table-column label="姓名" width="54">
          <template slot-scope="{row}">
            <!-- <img class="roodsPhoto" :src="getStaticFileUrl(row.imagePath)" alt=""> -->
            <PersonalImage :imgurl="row.imagePath" imgheight="60px" />
          </template>
        </el-table-column>
        <el-table-column prop="studentName" />
        <el-table-column label="证件号" prop="idCardNumber" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="当前级别" align="center">
          <template slot-scope="{row}">
            <span v-for="(item, index) in dict.duanType" :key="index">{{ item.code == row.duanTypeCode ? item.value : '' }}</span>
            {{ row.duanTypeCode !== null && row.levelTypeCode !== null ? '/':'' }}
            <span v-for="(item, index) in dict.levelType" :key="index + item">{{ item.code == row.levelTypeCode ? item.value : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报级别" align="center">
          <template slot-scope="{row}">
            <span v-for="(item,index) in row.duanExamStudentDuans" :key="index">{{ item.duan.name }} {{ row.duanExamStudentDuans.length > 0 ? row.duanExamStudentDuans.length - 1 === index ? '': '/' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="教练" align="center" prop="coachName" />
        <el-table-column label="会员费" align="center">
          <template slot-scope="{row}">
            <span v-if="row.memberFeeTypeCode !== null">
              {{ row.memberFeeTypeCode === 'New'?'新增':'续费' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="会员号" align="center" prop="memberNumber" />
        <el-table-column label="缴纳年限" align="center" prop="paymentYearTime" />
        <el-table-column label="申报金额" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat( row.requestAmount * 100) / 10000 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="会费金额" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat( row.memberAmount * 100) / 10000 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="其他费用" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ parseFloat( row.otherAmount * 100) / 10000 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="提交机构" align="center" prop="organizationUnitName" />
        <el-table-column label="操作" width="130">
          <template slot-scope="{ row }">
            <el-button size="mini" :disabled="!Boolean(ExamEntryApprovalDto.approveStatusCode === 'Draft' || ExamEntryApprovalDto.approveStatusCode === 'NotApproved')" type="text" @click="topersonal(row)">修改资料</el-button>
            <el-button size="mini" :disabled="!Boolean(ExamEntryApprovalDto.approveStatusCode === 'Draft' || ExamEntryApprovalDto.approveStatusCode === 'NotApproved')" type="text" @click="close(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-button v-if="Boolean(ExamEntryApprovalDto.approveStatusCode === 'Draft' || ExamEntryApprovalDto.approveStatusCode === 'NotApproved')" size="mini" type="primary" @click="submitInfo()">提交报名信息</el-button>
      <el-button v-else :disabled="true" size="mini" type="primary">已提交</el-button>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubDuanExamStudentQO.Page"
        :page-size="Api_GET_ClubDuanExamStudentQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import PersonalImage from '@/components/PersonalImage/index';
import { mapState, mapActions } from 'vuex';
import { api_GET_ClubDuanExamStudent, api_GET_ClubDuanExamEntryApprovalByDuanExamIdDuanExamId, api_DELETE_ClubDuanExamStudentId, api_POST_ClubDuanExamEntryApproval } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubDuanExamStudentQO } from '@/lib/form/hall/swaggerForm';
export default {
  components: {
    PersonalImage
  },
  data() {
    return {
      ExamEntryApprovalDto: {}, // 审核状态
      tableLoading: false,
      tableData: [],
      IsEnabled: '',
      totalPage: 0,

      Api_GET_ClubDuanExamStudentQO: new Api_GET_ClubDuanExamStudentQO() // 考生数据
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      user: state => state.user.currentOU
    })
  },
  created() {
    this.getDict();
    this.gettablelist();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取考生列表
    gettablelist(page) {
      this.tableLoading = true;
      this.Api_GET_ClubDuanExamStudentQO.IsCurrentOrgStudentScore = true;
      this.Api_GET_ClubDuanExamStudentQO.IncludeDuanExamRequestDuans = true;
      this.Api_GET_ClubDuanExamStudentQO.MemberFeeTypeCode = this.IsEnabled;
      this.Api_GET_ClubDuanExamStudentQO.DuanExamId = this.$route.query.id;
      this.Api_GET_ClubDuanExamStudentQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubDuanExamStudentQO.IncludeRegisterStudent = true;
      this.Api_GET_ClubDuanExamStudentQO.Page = page || 1;
      this.Api_GET_ClubDuanExamStudentQO.SkipCount = (this.Api_GET_ClubDuanExamStudentQO.Page - 1) * this.Api_GET_ClubDuanExamStudentQO.MaxResultCount;
      this.Api_GET_ClubDuanExamStudentQO.IsEnabled = this.IsEnabled;
      api_GET_ClubDuanExamStudent(this.Api_GET_ClubDuanExamStudentQO).then(res => {
        console.log(res);
        this.totalPage = res.totalCount;
        this.tableData = res.items;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
      // 查询考试审核
      const _json = {};
      _json.IncludeDuanExamEntryStatus = true; // type: boolean
      _json.IncludeDuanExam = true; // type: boolean
      api_GET_ClubDuanExamEntryApprovalByDuanExamIdDuanExamId(this.$route.query.id, _json).then(res => {
        this.ExamEntryApprovalDto = res;
        console.log(this.ExamEntryApprovalDto);
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    addstudent() {
      this.$router.push({ name: 'Addstudent', query: { id: this.$route.query.id }});
    },
    // 分页按钮
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubDuanExamStudentQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    // 重置按钮
    reset () {
      this.IsEnabled = '';
      this.Api_GET_ClubDuanExamStudentQO = new Api_GET_ClubDuanExamStudentQO();
      this.gettablelist();
    },
    // 删除按钮
    close(id) {
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_ClubDuanExamStudentId(id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.gettablelist();
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        });
    },
    // 提交报名信息
    submitInfo() {
      if (this.tableData.length === 0) {
        this.$message({ message: '请添加考生', type: 'warning' });
        return;
      }
      api_POST_ClubDuanExamEntryApproval({ duanExamId: this.$route.query.id }).then(res => {
        this.$message({ type: 'success', message: '提交成功' });
        this.gettablelist();
        this.$router.go(-1);
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 编辑考生
    topersonal(row) {
      console.log(row);
      this.$router.push({ name: 'Addstudent', query: { id: this.$route.query.id, registerStudentId: row.id }});
    }
  }

};
</script>

<style lang="scss" scoped>
.header{
 margin-bottom: 15px;
 display: flex;
}
.nav {
  margin-left: 80px;
  display: flex;
  justify-content: flex-start;
}
.nav>div {
  margin-right: 40px;
  display: flex;
  align-items: center;
}
.nav>div>span:nth-of-type(1){
  margin-right: 8px;
}
.nav_title{
font-size: 14px;
color: rgb(58, 58, 58);
font-weight: 900;
}
.nav_text {
font-size: 13px;
font-weight: 900;
color: rgb(207, 209, 209);
}
.foot {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
  .roodsPhoto{
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
    .table_name {
      display: inline-block;
      width: 700px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
</style>
